#_dtPicker {
    background-color: $bg-color-back;
    @extend .shade-as-card;
    @extend .shade-as-list;
    border-radius: $radius-m;
    button {
        width: 50%;
        background-color: $bg-color-front;
    }
    &[ctrl=y_off_m_off] {
        ._minYear,
        ._minMonth {
            display: none;
        }
    }
    &[ctrl=y_off_m_on] {
        ._minYear {
            display: none;
        }
        ._minMonth {
            display: block;
        }
    }
    &[ctrl=y_on_m_on] {
        ._minYear {
            display: block;
        }
        ._minMonth {
            display: block;
        }
    }
    &[ctrl=y_no_m_no] {
        ._addYear,
        ._addMonth {
            display: none;
        }
    }
    &[ctrl=y_no_m_yes] {
        ._addYear {
            display: none;
        }
        ._addMonth {
            display: block;
        }
    }
    &[ctrl=y_yes_m_yes] {
        ._addYear {
            display: block;
        }
        ._addMonth {
            display: block;
        }
    }
}

._dtIndicator {
    text-align: center;
    padding: 0.5em 0;
    position: relative;
    > div {
        &:nth-child(1) {
            line-height: 2em;
            font-weight: bolder;
        }
        &:nth-child(2) {
            line-height: 1.5em;
            font-size: 2em;
            font-weight: lighter;
        }
    }
}

._indiCtrl {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 1.125em;
    > a {
        font-family: Courier;
        position: absolute;
        display: inline-block;
        width: 1.8em;
        border-radius: 0.9em;
        text-align: center;
        line-height: 1.8em;
        cursor: pointer;
        box-shadow: 0 1px 0.25em white inset, 0 1px 0.25em white;
        border: 1px solid #b7b7b7;
        color: #b7b7b7;
        /*transition: all 0.4s ease;*/
        &:active {
            background-color: #a7ffeb;
            color: #004d40;
            box-shadow: 0 1px 2px #00bfa5 inset, 0 1px 0.25em white;
        }
        &:nth-child(1) {
            right: 4.5em;
            top: 0.5em;
        }
        &:nth-child(2) {
            left: 4.5em;
            top: 0.5em;
        }
        &:nth-child(3) {
            right: 4.5em;
            top: 2.65em;
        }
        &:nth-child(4) {
            left: 4.5em;
            top: 2.65em;
        }
    }
}

._dtTitle {
    padding: 0 0.857em;
    font-size: 0.875em;
    line-height: 3em;
    > pre {
        width: 14.28%;
        text-align: center;
        font-weight: bolder;
        color: #9e9e9e;
    }
}

._dtBtns {
    background-color: #f5f5f5;
    box-shadow: 0 1px 0.25em white inset;
}

._dtPlate {
    padding: 0.75em;
    text-align: left;
    background-color: #eeeeee;
    box-shadow: 0 1px 0.25em white inset;
    border-top: 1px #e0e0e0 solid;
    border-bottom: 1px #e0e0e0 solid;
    > a {
        display: inline-block;
        height: 2em;
        width: 14.28%;
        text-align: center;
        line-height: 2em;
        cursor: pointer;
        margin: 0.75em 0;
        color: #424242;
        position: relative;
        animation: _popAnim 0.2s ease;
        font-weight: lighter;
        &[today=today] {
            color: #009688;
            font-weight: bolder;
        }
        &[disabled=disabled] {
            color: #bdbdbd;
            font-weight: lighter;
        }
        &[today=today]:after {
            content: '';
            height: 0.25em;
            width: 0.25em;
            position: absolute;
            background-color: #009688;
            left: 50%;
            bottom: 0;
            margin-left: -0.125em;
            margin-bottom: -0.125em;
            border-radius: 0.25em;
            z-index: 0;
        }
        &[select=select] {
            color: white;
            &:after {
                content: attr(alt);
                height: 2em;
                width: 2em;
                background-color: #009688;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -1em;
                margin-top: -1em;
                border-radius: 1em;
                z-index: 0;
                color: white;
                animation: _popAnim 0.02s ease;
                box-shadow: 0 1px 0.25em #00796b inset, 0 1px 0.25em white;
            }
        }
    }
}

@keyframes _popAnim {
    0% {
        transform: scale(0.6);
    }
    90% {
        transform: scale(1.2);
    }
    95% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes _denyAnim {
    0% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(-2em, 0, 0);
    }
    75% {
        transform: translate3d(2em, 0, 0);
    }
    0% {
        transform: translate3d(0, 0, 0);
    }
}

._popAnim {
    animation: _popAnim 0.2s ease;
}

._denyAnim {
    animation: _denyAnim 0.2s ease;
}


/*timePicker*/

._indiM,
._indiH,
._dtIndicator > span {
    font-size: 3em;
    display: inline-block;
    line-height: 1.5em;
    cursor: pointer;
    font-weight: lighter;
    color: #9e9e9e;
    /*transition: all 0.2s ease;*/
}

._dtClock {
    width: 288px;
    height: 288px;
    background-color: white;
    margin: 0 auto;
    border-radius: 144px;
    position: relative;
    box-shadow: 0 0 0.25em white, 0 0 0.25em #bdbdbd inset;
    &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        height: 2em;
        width: 2em;
        background-color: #e0e0e0;
        border-radius: 1em;
        margin-left: -1em;
        margin-top: -1em;
        z-index: 2;
        box-shadow: 0 1px 0.25em #bdbdbd, 0 1px 0.25em white inset;
    }
}

._numContainer {
    animation: _opacityAnim 0.4s ease;
    height: 288px;
    width: 288px;
    > {
        a {
            display: inline-block;
            height: 2em;
            width: 2em;
            position: absolute;
            margin-left: -1em;
            margin-top: -1em;
            text-align: center;
            line-height: 2em;
            cursor: pointer;
            border-radius: 1em;
            font-weight: lighter;
            color: #424242;
            &[selected=selected] {
                background-color: #009688;
                color: white;
                border-color: #009688;
                z-index: 5;
                font-weight: bolder;
            }
        }
        ._indiDot {
            height: 1em;
            width: 1em;
            margin-left: -0.5em;
            margin-top: -0.5em;
            background-color: #bdbdbd;
            border-radius: 0.5em;
            overflow: hidden;
            line-height: 2em;
            border: 0.35em solid white;
            box-sizing: border-box;
        }
    }
}

._hHand {
    position: absolute;
    left: 50%;
    margin-left: -0.25em;
    bottom: 50%;
    width: 0.5em;
    height: 72px;
    background-color: #e0e0e0;
    transform-origin: center bottom;
    /*transition:all 0.6s ease;*/
}

._mHand {
    position: absolute;
    left: 50%;
    margin-left: -0.25em;
    bottom: 50%;
    width: 0.5em;
    height: 72px;
    background-color: #e0e0e0;
    transform-origin: center bottom;
    /*transition:all 0.6s ease;*/
    width: 0.25em;
    margin-left: -0.125em;
    /*transition:all 0.1s ease;*/
    height: 104px;
}

#_dtPicker {
    &[state=hour] ._hHand,
    &[state=minute] ._mHand {
        background-color: #009688;
        z-index: 1;
    }
    &[state=hour] ._indiH,
    &[state=minute] ._indiM {
        color: #009688;
        font-weight: bolder;
    }
}
